<template>
  <div class="app-page app-home-index">
    <topBarBase />
    <div id="swiperBox" class="swiper banner-nav">
      <div class="swiper-wrapper">
        <div 
          class="banner-item swiper-slide" 
          v-for="(item, i) in bannerData" :key="i"
        >
          <img class="swiper-slide-img" :src="item.img" />
        </div>
      </div>
    </div>
    <div 
      class="search-input animate__animated animate__pulse"
      @click="router.push('/search')"
    >
      <i class="iconfont icon-sousuo"></i>
      <span>你在找什么？</span>
    </div>
    <div class="page-model model-1">
      <div class="page-label">近期推荐</div>
      <div class="model-1-content">
        <!-- 1 -->
        <div class="content-item">
          <img class="item-cover" src="https://file.app.ikea.cn/cms/u/20240226/56963124fc7e40bca682639a22af238a.jpg" />
          <div class="item-text-content">
            <p class="label">探索当季新品</p>
            <p class="value">利用我们的最新产品系列，给家增添春日气息</p>
            <div class="icon-nav">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
        </div>
        <!-- 2 -->
        <div class="content-item">
          <img class="item-cover" src="https://file.app.ikea.cn/cms/u/20240327/6772b7d581004d3db3027640fc7f3287.jpg" />
          <div class="item-text-content">
            <p class="label">探索当季新品</p>
            <p class="value">利用我们的最新产品系列，给家增添春日气息</p>
            <div class="icon-nav">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
        </div>
        <!-- 3 -->
        <div class="content-item">
          <img class="item-cover" src="https://file.app.ikea.cn/cms/u/20240226/56963124fc7e40bca682639a22af238a.jpg" />
          <div class="item-text-content">
            <p class="label">探索当季新品</p>
            <p class="value">利用我们的最新产品系列，给家增添春日气息</p>
            <div class="icon-nav">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
        </div>
        <!-- 4 -->
        <div class="content-item">
          <img class="item-cover" src="https://file.app.ikea.cn/cms/u/20240327/6772b7d581004d3db3027640fc7f3287.jpg" />
          <div class="item-text-content">
            <p class="label">探索当季新品</p>
            <p class="value">利用我们的最新产品系列，给家增添春日气息</p>
            <div class="icon-nav">
              <i class="iconfont icon-jiantou"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="model-2-content">
        <div class="content-item">
          <img class="cover" src="https://mp-content.store-companion.ikea.cn/static/design-leads-pc-after-5.png" />
          <span class="cover-title">全屋设计服务</span>
          <span class="content-title">简意全屋家居设计服务 | 专业设计师1对1服务，为您打造理想中的家，费用最高可以享12期免息分期</span>
        </div>
      </div>
    </div>
    <div class="page-model model-2">
      <div class="page-label">热销排行</div>
      <div class="model-2-content">
        <div
          class="model-2-item"
          v-for="(v, i) in productRankingData" :key="i"
        >
          <div class="rank-top" :style="{ background: v.color }">
            <span class="title">热销榜</span>
            <span class="name">{{ v.class }}</span>
          </div>
          <div 
            class="product-item" 
            v-for="(product, i) in v.products" :key="i"
            @click="goProdictDeatil(product.id)"
          >
            <div class="key">{{ i + 1 }}</div>
            <img class="product-cover" :src="product.img[0]" />
            <div class="product-name">{{ product.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-model model-3">
      <div class="page-label">发现更多家居好物</div>
      <div class="model-3-class-list">
        <div 
          class="class-item"
          :class="{ 'class-item-select': !classItemSelect }"
          @click="classItemSelect = null; getProductList()"
        >
          全部
        </div>
        <div 
          class="class-item"
          :class="{ 'class-item-select': v.value === classItemSelect }"
          v-for="(v, i) in productClassData" :key="i"
          @click="classItemSelect = v.value; getProductList()"
        >
          {{ v.value }}
        </div>
      </div>
      <div class="model-3-content">
        <div class="empty-text" v-if="productList && productList.length === 0">
          <i class="iconfont icon-empty"></i>
          <div>暂无数据</div>
        </div>
        <div 
          class="product-item"
          v-for="(product, i) in productList" :key="i"
          @click="goProdictDeatil(product.id)"
        >
          <img class="cover" :src="product.img[0]" />
          <div class="product-name-nav">
            <span class="name">{{ product.name }}</span>
            <span class="class"> （{{ product.class }}）</span>
          </div>
          <div class="product-info">
            <div class="bottom-nav">
              <div class="price-nav">
                <div class="price">￥{{ product.price }}</div>
              </div>
              <div class="option">
                <div class="btn btn-2"><i class="iconfont icon-shoucang"></i></div>
                <div class="btn"><i class="iconfont icon-tianjiagouwuche"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottomBar />
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import TopBarBase from "@/components/appBase/topBarBase.vue"
import BottomBar from "@/components/appBase/bottomBarBase.vue"
import Swiper from "swiper"
import "swiper/dist/css/swiper.css"
import { 
  product_ranking_data,
  product_class_data,
  get_product_data
} from "@/appModel/product.model.js";
import {
  appLogin
} from "@/api/login.api.js";

const router = useRouter();
const bannerData = ref([
  {
    id: 1,
    img: "https://file.app.ikea.cn/cms/u/20240329/8d4dfbf30bb34758873a5ab56c7be702.jpg?x-oss-process=style/large&x-oss-process=style/medium",
    url: ""
  },
  {
    id: 2,
    img: "https://file.app.ikea.cn/cms/u/20240312/cfb954662cb14a2aa56e0a1b57bcb14f.jpg?x-oss-process=style/large&x-oss-process=style/medium",
    url: ""
  },
  {
    id: 3,
    img: "https://file.app.ikea.cn/cms/u/20240402/75c3700b76b644c4b572d2f8cd2c7c6d.jpg?x-oss-process=style/large&x-oss-process=style/medium",
    url: ""
  },
]);

const swiperInit = () => {
  new Swiper("#swiperBox", {
    loop: true,
    autoplay: { 	//自动播放
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
      reverseDirection: false,
      waitForTransition: true,
    },
  });
};

const productRankingData = ref(product_ranking_data);
const productClassData = ref(product_class_data);
const classItemSelect = ref(null);
const productList = ref([]);

const getProductList = () => {
  // console.log("classItemSelect.value => ", classItemSelect.value);
  productList.value = get_product_data({
    class: classItemSelect.value
  });
};

const goProdictDeatil = (id) => {
  router.push({
    path: "/product/detail",
    query: { id }
  })
};

onMounted(() => {
  swiperInit();
  getProductList();
  appLogin({
    "username": "chanyue",
    "password": "123456"
  });
});


</script>
<style lang="scss" scoped>
.app-home-index {
  margin: 0 auto;
  width: 7.5rem;
  min-height: 100vh;
  background: linear-gradient(180deg, #0b0d13 0%, #060828 100%);
  font-size: 0.2rem;
  .banner-nav {
    overflow: hidden;
  }
  .banner-item {
    width: 7.5rem;
    height: 8.3rem;
    // overflow: hidden;
    .swiper-slide-img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }
  }
  .search-input {
    // 应用无限循环动画
    animation-duration: 2.6s;
    animation-iteration-count: infinite;
    margin: 0.1rem 0.5rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.22rem;
    font-weight: bolder;
    width: calc(100% - 1rem);
    position: relative;
    top: -0.18rem;
    color: #515151;
    background: rgba($color: #fff, $alpha: 1);
    border-radius: 0.6rem;
    line-height: 0.44rem;
    height: 0.4rem;
    display: flex;
    align-items: center;
    z-index: 900;
    box-shadow:0 0rem 0.08rem 0.08rem rgba($color: #fff, $alpha: 0.3);
    .iconfont {
      margin-right: 0.2rem;
      font-size: 0.38rem;
    }
  }
  .page-model {
    margin: 0.1rem 0.25rem 0.5rem;
    width: calc(100% - 0.5rem);
    color: #fff;
    display: flex;
    flex-direction: column;
    .page-label {
      margin: 0 0 0.25rem;
      font-size: 0.32rem;
    }
    // 近期推荐
    &.model-1 {
      .model-1-content {
        display: flex;
        width: 100%;
        overflow: auto;
        .content-item + .content-item {
          margin-left: 0.28rem;
        }
        .content-item {
          width: 2.6rem;
          min-width: 2.6rem;
          background: #fff;
          display: flex;
          flex-direction: column;
          .item-cover {
            width: 100%;
            height: 2.3rem;
            object-fit: cover;
          }
          .item-text-content {
            padding: 0.3rem 0.15rem;
            font-size: 0.2rem;
            color: #212121;
            .label {
              font-size: 0.24rem;
              font-weight: bolder;
            }
            .value {
              margin-top: 0.16rem;
              line-height: 0.36rem;
            }
            .icon-nav {
              margin-top: 0.6rem;
              width: 0.5rem;
              height: 0.5rem;
              border-radius: 0.5rem;
              background: #6936ff;
              color: #fff;
              font-weight: bolder;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
      .model-2-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        .content-item {
          margin: 0.26rem 0 0;
          width: 100%;
          .cover {
            margin: 0 0 0.2rem;
            width: 100%; height: 3.5rem;
            object-fit: cover;
          }
          .cover-title {
            position: absolute;
            top: 3.1rem;
            left: 0.2rem;
            font-size: 0.36rem;
            font-weight: bolder;
            text-shadow: 1px 1px 2px black;
          }
          .content-title {
            font-size: 0.28rem;
            line-height: 0.6rem;
          }
        }
      }
    }
    // 热销排行
    &.model-2 {
      display: flex;
      flex-direction: column;
      .model-2-content {
        display: flex;
        align-items: flex-start;
        width: 100%;
        overflow: auto;
        .model-2-item + .model-2-item {
          margin-left: 0.28rem;
        }
        .model-2-item {
          background: #fff;
          min-width: 4.2rem;
          border-radius: 0.1rem;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .rank-top {
            display: flex;
            flex-direction: column;
            padding: 0.2rem;
            width: 100%;
            .name {
              margin-top: 0.1rem;
              font-size: 0.28rem;
              font-weight: bold;
            }
          }
          .product-item {
            padding: 0.2rem;
            font-size: 0.18rem;
            color: #0b0b0b;
            display: flex;
            align-items: center;
            .key {
              margin-right: 0.2rem;
              width: 0.36rem;
              height: 0.36rem;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
            }
            &:nth-child(2) { .key { background: #6936ff; } }
            &:nth-child(3) { .key { background: #fddd00; } }
            &:nth-child(4) { .key { background: #ff9a3f; } }
            .product-cover {
              margin: 0 0.2rem 0 0;
              width: 0.8rem;
              height: 0.8rem;
              object-fit: cover;
            }
          }
        }
      }
    }
    &.model-3 {
      .model-3-class-list {
        width: 100%;
        overflow: auto;
        display: flex;
        align-items: center;
        .class-item + .class-item {
          margin-left: 0.15rem;
        }
        .class-item {
          padding: 0.16rem 0.3rem;
          border: 1px solid #fff;
          border-radius: 0.12rem;
          font-size: 0.23rem;
          min-width: 1.2rem;
          text-align: center;
          &.class-item-select {
            color: #fff;
            font-weight: bolder;
            border: 1px solid #6936ff;
            background: #6936ff;
          }
        }
      }
      .model-3-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        .empty-text {
          padding: 0.6rem 0;
          width: 100%;
          text-align: center;
          font-size: 0.25rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .iconfont {
            margin: 0.12rem 0;
            font-size: 0.8rem;
          }
        }
        .product-item {
          margin: 0.3rem 0 0;
          width: 48%;
          min-height: 5.8rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          border-radius: 0.2rem;
          overflow: hidden;
          background: rgba($color: #845bff, $alpha: 0.2);
          .cover {
            width: 100%;
            object-fit: cover;
            background: #060828;
            border-radius: 0.1rem 0.1rem 0rem 0rem;
          }
          .product-name-nav {
            margin: 0.2rem 0;
            padding: 0 0.2rem;
            font-size: 0.26rem;
            line-height: 0.32rem;
            .name {
              font-weight: bolder;
            }
          }
          .product-info {
            padding: 0.2rem 0.2rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            .bottom-nav {
              position: relative;
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              .price-nav {
                position: relative;
                font-size: 0.26rem;
                font-weight: bolder;
                .price {
                  position: relative;
                  top: -0.02rem;
                  left: -0.02rem;
                  padding: 0.06rem 0.1rem;
                  background: #845bff;
                }
                &::before {
                  position: absolute;
                  top: 0;
                  left: 0;
                  content: "";
                  width: 100%;
                  height: 100%;
                  background: #fff;
                }
              }
              .option {
                display: flex;
                align-items: center;
                .btn + .btn {
                  margin-left: 0.18rem;
                }
                .btn {
                  width: 0.65rem;
                  height: 0.65rem;
                  border: 1px solid #fff;
                  background: #845bff;
                  border-radius: 1rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .iconfont {
                    color: #fff;
                    font-size: 0.35rem;
                  }
                  &.btn-2 {
                    background: #e00751;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
